import './App.css';
import React, { Component } from 'react'
import axios from 'axios'
import MusicItem from './components/MusicItem'
export default class App extends Component {
  constructor(props){
    super(props)
      this.state={
          music:[]
      }
  }
  render() {
    const ListItem = this.state.music.map(item=>{
      return ( <MusicItem data={item} key={item.id}></MusicItem>)
    })
    return (
      <div className="app">
       {ListItem}
      </div>
    )
  }
  componentDidMount(){
    axios.get('http://www.chengbenchao.top:3000/top/playlist?cat=%E5%8D%8E%E8%AF%AD').then(res=>{
        var playlists = res.data.playlists
        this.setState({
            music:playlists
        })
    })
}
}
